<template>
  <!-- 首页 -->
  <div class="index_container">
    <!-- 头部 -->
    <div class="header_container">
      <div class="header_content">
        <!-- 搜索框 -->
        <div class="flex flex_p">
          <div class="logo" @click="goToHome"></div>
          <div class="search" :style="{ width: (!showLoginBtn) ? '266px' : '' }" @click="toSearch">
            <i style="margin-right: 0.13rem;"><van-icon name="search" /></i>
            <span>搜索商品, 共有30000+款好物 &nbsp;</span>
          </div>
          <button class="toLogin" @click="toLogin" v-if="!!showLoginBtn">登录</button>
        </div>
        <!-- 导航栏 -->
        <div class="navbar">
          <van-tabs v-model:active="active" shrink color="red" swipeable title-active-color="red" line-height="1px"
            @click-tab="clickTab" v-if="navShow">
            <van-tab v-for="(item, index) in navbarList" :title="item.title">
            </van-tab>
          </van-tabs>
          <div v-else style="height: 30px; font-size: 14px; line-height: 45px; padding-left: 10px;"> 全部频道</div>
          <div class="showAll" @click="changeShowArrow">
            <van-icon name="arrow-up" v-if="isShow" />
            <van-icon name="arrow-down" v-else />
          </div>
          <div class="show_all_nav_list" v-show="isShow">
            <van-grid :gutter="10">
              <van-grid-item v-for="(value, index) in navbarList" :class="(currentVal == index) && 'active'"
                @click="clickActiveTab(index)" :key="index" :text="value.title" />
            </van-grid>
          </div>
          <van-overlay :show="isShow" @click="isShow = false, navShow = true" />
        </div>
      </div>
    </div>


    <router-view></router-view>

    <Tabbar></Tabbar>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, watch, computed } from "vue";
import { homeApi, type HomeDataModel } from '@/api/home';
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute()


/* 设置响应式数据 */
// 控制导航栏当前词条高亮的数据
const active = ref(0);
// 控制导航栏箭头方向的数据
const isShow = ref(false)
const navShow = ref(true)
//搜索跳转
function toSearch() {
  router.push('/search')
}
// 控制全部分类的数据
const currentVal = ref(0)
// 用来控制首页是否显示登录按钮的变量
const showLoginBtn = ref(true)
// 首页需要展示的数据
const homeData = ref<HomeDataModel>()
// 导航分类的数据
const navbarList = ref<{ title: string, categoryId: string }[]>([
  {
    title: '推荐',
    categoryId: '0'
  }
])


/* 生命周期钩子函数 */
onMounted(() => {
  if (localStorage.getItem('currentIndex')) {
    getCurrentIndex()
  }
  getHomeData()
  showLoginBtn.value = !(localStorage.getItem('token') as string)
})
watch(() => route.params.categoryId, () => {
  if (localStorage.getItem('currentIndex')) {
    getCurrentIndex()
  }
  getHomeData()
  showLoginBtn.value = !(localStorage.getItem('token') as string)
}, { immediate: true, deep: true })

/* 发送请求的功能函数 */
async function getHomeData() {
  try {
    let result = await homeApi.getHomeData();
    homeData.value = result
    navbarList.value = [{
      title: '推荐',
      categoryId: '0'
    }]
    navbarList.value.push(...result.data.categoryHotSellModule.categoryList.map((item) => {
      return {
        categoryId: item.extra.operationResource.categoryId,
        title: item.extra.operationResource.categoryName
      }
    }))
  } catch (error) {
    console.error(error)
  }
}


/* 自定义事件的回调 */
// 点击上下箭头的回调
function changeShowArrow() {
  isShow.value = !isShow.value
  navShow.value = !navShow.value
}
// 点击导航栏的回调
function clickTab(evn: any) {
  localStorage.setItem('currentIndex', evn.name)
  if (localStorage.getItem('currentIndex')) {
    getCurrentIndex()
  } else {
    currentVal.value = evn.name
  }
  let categoryId = navbarList.value.find((item) => {
    return item.title == evn.title
  })?.categoryId
  if (categoryId == '0') {
    router.push('/home')
  } else {
    router.push(`/home/category/${categoryId}`)
  }
}
// 获取本地存储中的当前页下标的函数
function getCurrentIndex() {
  currentVal.value = Number(localStorage.getItem('currentIndex'))
  active.value = Number(localStorage.getItem('currentIndex'))
}

// 点击出现的导航名称的回调
function clickActiveTab(index: number) {
  currentVal.value = index
  active.value = index
  localStorage.setItem('currentIndex', String(index))
  if (localStorage.getItem('currentIndex')) {
    getCurrentIndex()
  } else {
    currentVal.value = index
  }
  let categoryId = navbarList.value[index]?.categoryId
  if (categoryId == '0') {
    router.push('/home')
  } else {
    router.push(`/home/category/${categoryId}`)
  }
}
// 点击首页logo的回调
function goToHome() {
  localStorage.setItem('currentIndex', '0')
  if (localStorage.getItem('currentIndex')) {
    getCurrentIndex()
  } else {
    currentVal.value = 0
    active.value = 0
  }
  router.push('/home')
}

// 点击登录按钮的回调
function toLogin() {
  router.push('/login')
}
</script>




<style scoped lang="less">
.index_container {
  width: 100%;
  position: relative;

  /deep/ .van-overlay {
    height: 80%;
    position: fixed;
    top: 34%
  }

  // 头部
  .header_container {
    height: 1.99rem;
    width: 100%;


    .header_content {
      background: #fff;
      position: fixed;
      top: 0;
      z-index: 99;
      width: 100%;


      // 头部logo、搜索框
      .flex_p {
        align-items: center;
        justify-content: space-between;
        padding: 0.2rem 0.4rem;

        .logo {
          background-image: url('../../assets/spriteIcon.png');
          background-position: -1.68rem -4.45rem;
          background-size: 5rem;
          height: 0.5rem;
          width: 1.87rem;
          margin-right: 0.27rem;
        }

        .search {
          width: 221px;
          height: 0.75rem;
          line-height: 0.75rem;
          text-align: center;
          font-size: 0.38rem;
          color: #666;
          background-color: #EDEDED;
          border-radius: 3px;
        }

        .toLogin {
          background-color: #fff;
          font-size: 12px;
          width: 37px;
          height: 20px;
          margin-left: 8px;
          color: red;
          border-radius: 4px;
          border: 1px solid red;
        }
      }

      // 导航栏
      .navbar {
        width: 100%;
        position: relative;
        align-items: center;

        /deep/ .van-tab.van-tab--line {
          width: 25%;
        }

        /deep/ .van-tabs__line {
          width: 72px;

        }

        .showAll {
          padding-top: 8px;
          position: absolute;
          right: 0;
          top: 0;
          width: 50px;
          height: 30px;
          background: #fff;
          text-align: center;
          color: #707070;


        }

        .show_all_nav_list {
          width: 100%;
          height: 144px;
          padding: 12px 0 0 0;
          background: #fff;

          /deep/ .van-grid-item.active>.van-grid-item__content>.van-grid-item__text {
            color: red;
          }

          /deep/ .van-grid-item__content {
            height: 28px;
          }
        }
      }
    }
  }





}
</style>